<template>
  <div class="app-user">
    <div class="app-user__avatar">
      <el-avatar class="avatar_img"  :src="avatarImage" />
    </div>
    <div class="app-user__nickname">
      {{ userStore.user?.nickname || userStore.user?.username || '测试' }}
    </div>
  </div>
</template>
<script setup>
import avatarImage from '@/assets/cluo.jpg';
const userStore = useUserStore()
</script>
<style lang="scss" scoped>
.app-user__avatar {
  width: 56px;
  height: 56px;
}

.app-user__nickname {
  text-align: center;
  margin-top: 8px;
  font-weight: 600;
  color: #202630;
  word-wrap: break-word;
}
</style>

<style>
.avatar_img img{
  width: 66px;
    height: 42px;
}
</style>
